@import "./mixins";
.unis- {
	line-height: 1;
	&ex-sm {
		padding: 0.429rem 1.405rem  !important;
		height: auto;
		font-size: 0.857rem!important;
		min-width: 60px !important;
	}
	&sm {
		padding: 0.643rem 1.9rem !important;
		height: auto;
	}
	&icon{
		font-family: 'unis' !important;
	}
	&btn-icons {
		padding: 0.115rem 1.137rem  !important;
		height: auto;
		width: auto;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		border-radius: 6px;
		position: relative;
		font-size: 1rem;
		@include flexCenter(center);
		cursor: pointer;
		text-align: center;
		outline: 0;
		border: none;
		white-space: nowrap;
		vertical-align: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background: inherit;
		box-sizing: border-box;
		&:hover, &:focus {
			text-decoration: none;
			outline: 0;
		}
	}
	&lag {
		width: 100% !important;
	}
	&btn {
		padding: 0.9286rem 1.9rem;
		@include flexCenter(center);
		cursor: pointer;
		font-size: 1rem;
		min-width: 120px;
		text-align: center;
		outline: 0;
		border: none;
		font-weight: 600;
		letter-spacing: 0.021rem;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background: inherit;
		box-sizing: border-box;
		border-radius: 0.25rem;
		&:hover, &:focus {
			text-decoration: none;
			outline: 0;
		}
		&:focus {
			box-shadow: 0px 7px 20px rgba(44, 60, 89, 0.07);
		}
		& > .icon-box {
			margin-right: 0.857rem;
		}
		&- {
			&primary {
				background: #56A7FD;
				color: #ffffff;
				border-radius: 4px;

				&:hover {
					background-color: #529ced;
				}

				&:focus {
					background-color: #519bed;
				}

				&.disabled, &:disabled {
					color: #afb6c1;
					background-color: #eff0f4;
					cursor: not-allowed !important;
				}
			}
			&secondary {
				background: #D5E9FA;
				color: #56A7FD;
				border-radius: 4px;

				&:hover {
					background-color: #c4d8ea;
				}

				&:focus {
					background-color: #c4d8ea;
				}

				&.disabled, &:disabled {
					color: #afb6c1;
					background-color: #eff0f4;
					cursor: not-allowed !important;
				}
			}
			&tertiary {
				background: none;
				color: #959dac;

				&:hover {
					background: none;
					color: #56a7fd;
				}

				&:focus {
					background: none;
					color: #56a7fd;
					box-shadow:none!important;
				}

				&.disabled, &:disabled {
					color: #afb6c1;
					background: none;
					cursor: not-allowed !important;
				}
			}
			&ghost {
				background: none;
				color: #959dac;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					top: 100%;
					height: 3px;
					background: #56a7fd;
					left: 0;
					right: 0;
					-webkit-transform: scaleX(0);
					transform: scaleX(0);
					border-radius: 4px;
					transition: -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
					transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1);
					transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);

				}
				&:hover {
					background: none;
					color: #56a7fd;
				}
				&:hover::after {
					-webkit-transform: scaleX(1);
					transform: scaleX(1);
					transition: -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
					transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1);
					transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
				}
				&:focus {
					background: none;
					color: #56a7fd;
					box-shadow:none!important;
				}
				&:focus::after {
					-webkit-transform: scaleX(1);
					transform: scaleX(1);
					transition: -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
					transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1);
					transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .45s cubic-bezier(0.23, 1, 0.32, 1);
				}
				&.disabled, &:disabled {
					color: #afb6c1;
					background: none;
					cursor: not-allowed !important;
				}
				&:disabled:hover::after {
					background: none;
					-webkit-transform: scaleX(0);
					transform: scaleX(0);
				}
			}
			&split {
				background: #56A7FD;;
				color: #ffffff;
				position: relative;
				padding-right: 45px;
				&::before {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					height: 100%;
					width: 32px;
					background: inherit;
					border-radius: 0 4px 4px 0;
					transition: background 0.5s;
				}
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -3px;
					right: 10px;
					border-width: 6px;
					width: 0;
					height: 0;
					border-style: solid;
					border-color: currentcolor transparent transparent transparent;
				}
				&:hover {
					background: #56A7FD;;
					color: #ffffff;
				}
				&:hover::before {
					background: #529ced;
					ition: background 0.5s;
				}
				&:focus {
					background: #56A7FD;;
					color: #ffffff;
				}
				&:focus::before {
					background: #529ced;
					ition: background 0.5s;
				}
				&.disabled, &:disabled {
					color: #8E97A7;
					background: #E9EBEF;
					cursor: not-allowed !important;
				}
				&[disabled]:hover::before {
					background: none;
					-webkit-transform: scaleX(0);
					transform: scaleX(0);
				}
				&[disabled] > ul {
					display: none;
				}
				@include roll;
			}
		}
		&.active {
			background-color: #519bed !important;
		}
	}
	&btn-group {
		@include flexCenter(center);
		justify-content: flex-start !important;
		& > button {
			&:not(:last-child) {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			&:not(:first-child) {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
		}
	}
	&put {
		padding: 0.42rem 1rem;
		background: #FFFFFF;
		font-size: 1rem;
		min-height: 32px;
		border: 1px solid #ffffff;
		width: 100%;
		box-sizing: border-box;
		outline: 0;
		display: block;
		color: #2C3C59;
		white-space: nowrap;
		vertical-align: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		border-radius: 6px;
		transition: all 0.4s;
		&::-webkit-input-placeholder {
			color: #D3D8DE;
		}
		&:-moz-placeholder {
			color: #D3D8DE;
		}
		&::-moz-placeholder {
			color: #D3D8DE;
		}
		&:-ms-input-placeholder {
			color: #D3D8DE;
		}
		&:focus {
			border: 1px solid #56A7FD;
			transition: all 0.4s;
			box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		}
		&.display {
			background: none !important;
			padding-left: 0 !important;
			border: none !important;
			box-shadow: none !important;
		}
		&.display:focus {
			background: none !important;
			border: none !important;
			box-shadow: none !important;
		}
		&[disabled] {
			background: #EDEDED !important;
			border: none !important;
			box-shadow: none !important;
		}
		&[disabled]:focus {
			background: #EDEDED !important;
			border: none !important;
			box-shadow: none !important;
		}
	}
	&agt {
		position: relative;
		height: auto;
		width: auto;
		& > div:first-child {
			position: absolute;
			width: 100%;
			left: 0;
			display: block;
			padding-left: 1rem;
			buttom: -2px;
			color: #505C73;
		}
		& > .al-r {
			text-align: right;
		}
		& > input {

		}
	}
	&agt.error {
		& + label {
			color: #ED5158;
		}
		& > div:first-child {
			color: #ED5158;
		}
		& > input {
			border: 1px solid #EFA2A7;
			box-sizing: border-box;
			box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);

		}
		& > .unis-line-put {
			border-bottom: 1px solid #EFA2A7 !important;
			box-sizing: border-box;
			box-shadow: none !important;

		}
		& > .warn {
			position: absolute;
			width: 1rem;
			height: 1rem;
			right: 1rem;
			top: 8px;
			background: #ED5158;
			border-radius: 1rem;
			&:before {
				content: '!';
				position: absolute;
				color: #ffffff;
				text-align: center;
				line-height: 1rem;
				font-size: 12px;
				width: 1rem;
				height: 1rem;
			}
		}
	}
	&agt.warning {
		& > div:first-child {
			color: #FFD36A;
		}
		& > input {
			border: 1px solid #FFD36A;
			box-sizing: border-box;
			box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);

		}

		& > .unis-line-put {
			border-bottom: 1px solid #FFD36A !important;
			box-sizing: border-box;
			box-shadow: none !important;

		}
		& > .warn {
			position: absolute;
			width: 1rem;
			height: 1rem;
			right: 1rem;
			top: 8px;
			background: #FFD36A;
			border-radius: 1rem;
			&:before {
				content: '!';
				position: absolute;
				color: #ffffff;
				text-align: center;
				line-height: 1rem;
				font-size: 12px;
				width: 1rem;
				height: 1rem;
			}
		}
	}
	&agt.uins-tooltips {
		& > .totip {
			display: none;
			position: absolute;
			z-index: 10;
			min-height: 32px;
			height: auto;
			background: #D5E9FA;
			padding: 0.5em 1em;
			border-radius: 6px;
			line-height: 1.5;
			font-size: 12px;
			color: #56A7FD;
			&:before {
				position: absolute;
				content: " ";
				border-width: 0.5rem;
				width: 0;
				height: 0;
				border-style: solid;
			}
		}
		& > .warn ~ .left {
			right: 0rem;
			width: auto;
			max-width: 70%;
			top: calc(100%);
			&:before {
				top: -14px;
				right: 16px;
				border-color: transparent transparent #D5E9FA transparent;
			}

		}
		& > .warn:hover ~ .left {
			display: block;
		}
		& > .warn ~ .right {
			left: calc(100%);
			width: 180px;
			top: 0;
			&:before {
				top: 10px;
				left: -14px;
				border-color: transparent #D5E9FA transparent transparent;
			}

		}
		& > .warn:hover ~ .right {
			display: block;
		}

		& > .warn {
			position: absolute;
			width: 1rem;
			height: 1rem;
			z-index: 100;
			right: 1rem;
			top: 8px;
			background: #56A7FD;
			border-radius: 1rem;
			&:before {
				content: '?';
				position: absolute;
				color: #ffffff;
				text-align: center;
				line-height: 1rem;
				font-size: 12px;
				width: 1rem;
				height: 1rem;
			}
		}
	}
	&textarea {
		width: 100%;
		background: #FFFFFF;
		border: none;
		min-height: 64px;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		border-radius: 8px;
		padding: 0.5rem 1rem;
		&:focus {
			outline: 0;
		}
	}
	&functional-box {
		min-width: 120px;
		width: inherit;
		background: #FFFFFF;
		border: none;
		@include flexCenter(center);
		padding: 0.643rem 1rem;
		justify-content: space-between !important;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		border-radius: 6px;
		& > i {
			font-size: 14px;
			color: #8E97A7;
		}
		& > span {
			color: #8E97A7;
		}

	}
	&line-put {
		background: none !important;
		border-bottom: 1px solid #E9EBEF !important;
		border-top: none !important;
		border-right: none !important;
		border-left: none !important;
		box-shadow: none !important;
		border-radius: 0px !important;
		&:focus {
			border-bottom: 1px solid #56A7FD !important;
			transition: all 0.4s;
			box-shadow: none !important;
			border-radius: 0px !important;
			background: none !important;
		}
	}
	&select {
		&-xs {
			min-width: 64px !important;
			width: auto !important;
		}
		&-small {
			min-width: 120px !important;
			width: auto !important;
		}
		&-medium {
			min-width: 180px !important;
			width: auto !important;
		}
		&:focus {
			outline: none;
			border: none;
		}
		&.multi {
			& > ul {
				top: calc(100%) !important;
				border-radius: 0 0 6px 6px;
				border-top: dashed 1px #D3D8DE;
			}
		}
		position: relative;
		width: 100%;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		border-radius: 6px;
		width: 100%;
		display: flex;
		flex-flow: wrap;
		align-items: center;
		padding: 0;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		background: #ffffff;
		user-select: none;
		outline: none;
		border: none;
		input[type=button] {
			cursor: pointer;
			min-height: 32px;
			background: none;
			padding: 0.42rem 28px 0.42rem 1rem !important;
			width: 100%;
			height: 100%;
			flex: 1;
			z-index: 1;
			text-align: left;
			outline: none;
			color: #8E97A7;
			border: 1px solid #ffffff;
			transition: all 0.4s;
			&:focus {
				border: 1px solid #56A7FD;
				transition: all 0.4s;
			}
		}
		input[type=text] {
			flex: 1;
			z-index: 1;
			min-width: 80px;
			min-height: 32px;
			background: none;
			padding: 0.42rem 28px 0.42rem 1rem !important;
			height: 100%;
			text-align: left;
			cursor: text;
			outline: none;
			color: #8E97A7;
			border-top: 0;
			border-left: 0;
			border-right: 0;
			border-bottom: 1px solid #ffffff;
			transition: all 0.4s;
			&:focus {
				border-bottom: 1px solid #56A7FD;
				transition: all 0.4s;
			}
			&::-webkit-input-placeholder {
				color: #D3D8DE;
			}
			&:-moz-placeholder {
				color: #D3D8DE;
			}
			&::-moz-placeholder {
				color: #D3D8DE;
			}
			&:-ms-input-placeholder {
				color: #D3D8DE;
			}
		}
		&::after {
			content: '';
			position: absolute;
			bottom: 7px;
			right: 10px;
			border-width: 6px;
			width: 0;
			height: 0;
			z-index: 0;
			border-style: solid;
			border-color: #8E97A7 transparent transparent transparent;
		}
		& > span {
			line-height: 16px;
			letter-spacing: 0.4px;
			color: #56A7FD;
			background: #D5E9FA;
			@include flexCenter(center);
			font-size: 0.8rem;
			box-shadow: 0px 1.84107px 3.68213px rgba(46, 50, 60, 0.15);
			border-radius: 4px;
			padding: 0.2rem 10px 0.2rem 0.4rem;
			margin-right: 0.5rem;
			margin-bottom: 0.2rem;
			position: relative;
			& > i {
				width: 14px;
				height: 14px;
				margin-left: 6px;
				font-size: 10px;
				border-radius: 14px;
				background: #56A7FD;
				color: #ffffff;
				display: inline-block;
				cursor: pointer;

			}
		}
		@include roll;

	}
	&line-select {
		background: none !important;
		border-top: none !important;
		border-right: none !important;
		border-left: none !important;
		box-shadow: none !important;
		border-radius: 0px !important;
		&::after {
			display: inline-block;
			content: " ";
			height: 0.6em !important;
			width: 0.6em !important;
			border-width: 0 1px 1px 0;
			border-color: #8E97A7 !important;
			border-style: solid !important;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			-webkit-transform-origin: center;
			transform-origin: center;
			transition: -webkit-transform .3s;
			transition: transform .3s, -webkit-transform .3s;
			position: absolute;
			bottom: 12px !important;
			margin-left: -0.375em !important;
		}
		input[type=button] {
			border: 1px solid #ffffff;
			border-bottom-color: #E9EBEF !important;
			&:focus {
				border: 1px solid #ffffff;
				border-bottom-color: #56A7FD !important;
			}
		}
		input[type=text] {
			border-bottom: 1px solid #E9EBEF;
		}
	}
	&steps {
		@include flexCenter(center);
		display: inline-block;
		&.current, &.incomplete, &.completed, &.finish {
			& > span {
				width: 2rem;
				height: 2rem;
				border-radius: 2rem;
				line-height: 2rem;
				text-align: center;
				display: inline-block;
				margin-right: 1rem;
				box-shadow: 0px 7px 20px rgba(44, 60, 89, 0.07);
			}
		}
		&.current {
			& > span {
				background: #56A7FD;
				color: #ffffff;
			}
		}
		&.incomplete {
			& > span {
				background: #D3D8DE;
				color: #ffffff;
			}
		}
		&.completed {
			& > span {
				background: #56A7FD;
				color: #ffffff;
			}
		}
		&.finish {

			& > span {
				background: #56A7FD;
				color: #56A7FD;
				position: relative;
				font-size: 14px !important;
				&:after, &:before {
					content: ' ';
					position: absolute;
					display: block;
					background: white;
				}
				&:after {
					width: 0.16em;
					height: 0.55em;
					top: 43%;
					left: 31%;
					-webkit-transform: rotate(-42deg);
				}
				&:before {
					width: 2px;
					height: 1em;
					top: 27%;
					left: 56%;
					-webkit-transform: rotate(53deg);
				}

			}
		}

	}
	&radio,&checkbox{
		position:relative;
		font-size:100%;
		display:block;
		cursor: pointer;
		&>span:last-child{
			vertical-align: middle;
			margin-left: 0.5rem;
		}
		& > input[type="checkbox"],&> input[type="radio"] {
			display: none;
			margin-top: 0.2rem;
			&[disabled] {
				cursor: not-allowed;
			}
			+.unis-radio-style,+.unis-checkbox-style{
				position: relative;
				display: inline-block;
				width: 1.4em;
				height: 1.4em;
				margin-top: 0.2em;
				vertical-align: middle;
				cursor: pointer;
			}
		}
	}
	&checkbox>input[type="checkbox"] + &checkbox-style {
		margin-top: 0.4em !important;
	}
	&radio>input[type="radio"] + &radio-style:hover:before,
	&radio>input[type="radio"] + &radio-style:before,
	&checkbox>input[type="checkbox"] + &checkbox-style:before {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 1.4em;
		height: 1.4em;
		content: '';

	}
	&checkbox>input[type="checkbox"] + &checkbox-style:before {
		border: 1px solid #E9EBEF;
		background: #ffffff;
		box-shadow: 0px 2px 10px rgba(44, 60, 89, 0.07);
	}
	&radio>input[type="radio"] + &radio-style:before{
		border: 2px solid #20a0ff;

	}
	&radio>input[type="radio"] + &radio-style:after,
	&checkbox>input[type="checkbox"] + &checkbox-style:after {
		position: absolute;
		display: none;
		content: '';
	}
	&radio>input[type="radio"][disabled] + &radio-style,
	&checkbox>input[type="checkbox"][disabled] + &checkbox-style {
		cursor: not-allowed;
		color: #E4E4E4
	}
	&radio>input[type="radio"][disabled] + &radio-style:hover,
	&radio>input[type="radio"][disabled] + &radio-style:before,
	&radio>input[type="radio"][disabled] + &radio-style:after,
	&checkbox>input[type="checkbox"][disabled] + &checkbox-style:hover,
	&checkbox>input[type="checkbox"][disabled] + &checkbox-style:before,
	&checkbox>input[type="checkbox"][disabled] + &checkbox-style:after {
		cursor: not-allowed;
	}
	&radio>input[type="radio"][disabled] + &radio-style:hover:before,
	&checkbox>input[type="checkbox"][disabled] + &checkbox-style:hover:before {
		border: 2px solid #E4E4E4;
		-webkit-animation-name: none;
		animation-name: none;
	}
	&radio>input[type="radio"][disabled] + &radio-style:before{
		border-color: #E9EBEF;
	}
	&checkbox>input[type="checkbox"][disabled] + &checkbox-style:before {
		border-color: #E9EBEF;
		background: #E9EBEF;
		box-shadow: 0px 2px 10px rgba(44, 60, 89, 0.07);
	}
	&radio>input[type="radio"]:checked + &radio-style:before,
	&checkbox>input[type="checkbox"]:checked + &checkbox-style:before {
		-webkit-animation-name: none;
		animation-name: none;
	}
	&radio>input[type="radio"]:checked + &radio-style:after,
	&checkbox>input[type="checkbox"]:checked + &checkbox-style:after {
		display: block;
	}
	&radio>input[type="radio"] + &radio-style:before {
		border-radius: 100%;
	}
	&radio>input[type="radio"] + &radio-style:after {
		top: 0.4em;
		left: 0.4em;
		width: 0.65em;
		height: 0.6em;
		border-radius:  0.6em;
		background: #20a0ff;
	}
	&radio>input[type="radio"]:checked + &radio-style:before {
		border:  2px solid #20a0ff;
	}
	&radio>input[type="radio"]:checked[disabled] + &radio-style:before {
		border:  2px solid #D3D8DE;
		background: none;
	}
	&radio>input[type="radio"]:checked[disabled] + &radio-style:after {
		background: #8E97A7;
	}
	&checkbox>input[type="checkbox"] + &checkbox-style:before {
		border-radius: 3px;
	}
	&checkbox>input[type="checkbox"] + &checkbox-style:after {
		top: 2px;
		left: 0.5em;
		box-sizing: border-box;
		width: 0.4em;
		height: 0.85em;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		border-right:2px solid #fff;
		border-bottom:2px solid #fff;
	}
	&checkbox>input[type="checkbox"]:checked[disabled] + &checkbox-style:after {
		top: 2px;
		left: 0.5em;
		box-sizing: border-box;
		width: 0.4em;
		height: 0.85em;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		border-right:2px solid #8E97A7;
		border-bottom:2px solid #8E97A7;
	}
	&checkbox>input[type="checkbox"]:checked+ &checkbox-style:after {
		top: 2px;
		left: 0.5em;
		box-sizing: border-box;
		width: 0.4em;
		height: 0.85em;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		border-right:2px solid #20a0ff;
		border-bottom:2px solid #20a0ff;
	}
	&checkbox>input[type="checkbox"]:checked + &checkbox-style:before {
		border:2px solid #ffffff;
	}
	&checkbox>input[type="checkbox"]:checked[disabled] + &checkbox-style:before {
		border: #8E97A7;
		background: #E9EBEF;
		box-shadow: 0px 2px 10px rgba(44, 60, 89, 0.07);
	}
	&switch {
		&,&-style,-style:before{
			box-sizing: border-box;
		}

		display: inline-block;
		font-size: 100%;
		height: 1.6em;
		line-height: 1.6em;
		position: relative;
		&>span{
			vertical-align: middle;
		}
		&>span:last-child{
			vertical-align: middle;
			margin-left: 0.5rem;
		}
		&-style {
			height: 1.6em;
			left: 0;
			background: #C0CCDA;
			border-radius: 0.8em;
			display: inline-block;
			position: relative;
			top: 0;
			transition: all .3s ease-in-out;
			width: 3em;
			cursor: pointer;
			&:before{
				display: block;
				content:'';
				height: 1.4em;
				position: absolute;
				width: 1.4em;
				background-color: #fff;
				border-radius: 50%;
				left: 0.1em;
				top: 0.1em;
				transition: all .3s ease-in-out;
			}
		}
		&>input[type="checkbox"]{
			display:none;
			&[disabled] + .unis-switch-style{
				cursor: not-allowed;
				background-color:#C0CCDA;
			}
			&:checked + .unis-switch-style{
				background-color: #20a0ff;
				&:before{
					left:50%;
				}
			}
			&:checked[disabled] + .unis-switch-style{
				background-color:#b0d7f5;
			}
		}
		&>&-blue>input[type="checkbox"]{
			&:checked + .unis-switch-style{
				background-color: #20a0ff;
			}
			&:checked[disabled] + .unis-switch-style{
				background-color:#20a0ff;
			}
		}
	}
	&search-down{
		&.multi {
			& > ul {
				top: calc(100%) !important;
				border-radius: 0 0 6px 6px;
				border-top: dashed 1px #D3D8DE;
			}
		}
		position: relative;
		width: 100%;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		border-radius: 6px;
		width: 100%;
		display: flex;
		flex-flow: wrap;
		align-items: center;
		padding: 0;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		background: #ffffff;
		user-select: none;
		outline: none;
		border: none;
		&:focus {
			outline: none;
			border: none;
		}
		input[type=text] {
			flex: 1;
			z-index: 1;
			min-height: 32px;
			background: none;
			padding: 0.643rem 0 0.643rem 36px!important;
			height: 100%;
			text-align: left;
			cursor: text;
			outline: none;
			color: #8E97A7;
			border: none;
			&:focus {
				& + i{
					color: #56A7FD;
					transition: all 0.4s;
				}
			}
			&::-webkit-input-placeholder {
				color: #D3D8DE;
			}
			&:-moz-placeholder {
				color: #D3D8DE;
			}
			&::-moz-placeholder {
				color: #D3D8DE;
			}
			&:-ms-input-placeholder {
				color: #D3D8DE;
			}
		}
		& >i{
			position: absolute;
			top: 8px;
			left: 12px;
			font-size: 16px;
			transition: all 0.4s;
			color: #C8CDD5;
		}
		@include roll;
	}

	&uploader {
		&.long {
			display: flex !important;
			width: 100% !important;
		}
		background: #FFFFFF;
		border-radius: 6px;
		@include flexCenter(center);
		display: inline-flex;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		padding: 0;
		input[type=text] {
			z-index: 1;
			flex: 1;
			min-width: 80px;
			min-height: 32px;
			background: none;
			padding: 0.643rem 28px 0.643rem 1rem !important;
			text-align: left;
			cursor: text;
			outline: none;
			color: #8E97A7;
			border: none;
			transition: all 0.4s;
			&:focus {
				outline: none;
				transition: all 0.4s;
			}
			@include placeholder;
		}
		& > span {
			width: 76px;
			display: block;
			min-height: 32px;
			position: relative;
			font-weight: 600;
			color: #56A7FD;
			line-height: 32px;
			font-size: 12px;
			text-align: center;
			cursor: pointer;
			> input[type="file"] {
				position: absolute;
				font-size: 100px;
				right: 0;
				top: 0;
				opacity: 0;
				cursor: pointer;
				filter: alpha(opacity=0);
				width: 100%;
				z-index: 1;
				display: block;
			}
		}
		input[type=button] {
			cursor: pointer;
			width: 76px;
			min-height: 32px;
			z-index: 1;
			outline: none;
			border: none;
			background: #56A7FD;
			border-radius: 0px 6px 6px 0px;
			color: #ffffff;
		}
	}
	&uploading {
		width: 448px;
		height: 72px;
		border: dashed 1px #D3D8DE;
		box-sizing: border-box;
		border-radius: 6px;
		@include flexCenter(center);
		position: relative;
		& > input[type="file"] {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			cursor: pointer;
			width: 100%;
			z-index: 1;
			display: block;
		}
		& > i {
			font-size: 32px;
			color: #C8CDD5;
			margin-right: 10px;
		}
		& > span {
			color: #56A7FD;
			padding: 0 5px;
		}
	}
	&uploading-state {
		min-width: 288px;
		border-radius: 6px;
		display: inline-block;
		@include flexCenter(center);
		justify-content: flex-start !important;
		& > .error {
			background: #EFA2A7;
			color: #ED5158 !important;
			& > .mation {
				& > input[type=text] {
					color: #ED5158 !important;
				}
			}
		}
		& > .details {
			flex: 1;
			padding: 0 2rem 0 1rem;
			color: #C8CDD5;
			@include flexCenter(center);
			justify-content: space-between;
			& > .mation {
				position: relative;
				flex: 1;
				max-width: 280px;
				padding-right: 4rem;
				& > .progress {
					width: 1%;
					height: 2px;
					background: #56A7FD;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;
				}
				& > .progress + input[type=text] {
					border-bottom: 2px solid #D5E9FA;
				}
				& > input[type=text] {
					z-index: 1;
					width: 100%;
					min-height: 32px;
					background: none;
					padding: 0.643rem 0 !important;
					text-align: left;
					cursor: text;
					outline: none;
					color: #677388;
					border: none;
					transition: all 0.4s;
					&:focus {
						outline: none;
						transition: all 0.4s;
					}
					@include placeholder;
				}
			}

		}
		& > i {
			z-index: 1;
			width: 16px;
			font-size: 22px;
			height: 16px;
			background: none;
			margin-left: 2rem;
			outline: none;
			border: none;
			position: relative;
			color: #C8CDD5;
			& > input[type=button] {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				z-index: 1;
				opacity: 0;
				filter: alpha(opacity=0);
				cursor: pointer;
			}
			@include placeholder;

		}
		& > input[type=button] {
			padding: 0 5px;
			background: none;
			border: none;
			display: inline-block;
			margin-left: 10px;
			cursor: pointer;
			color: #56A7FD;
			&:focus {
				border: none;
				outline: none;
			}
		}
	}
	&adj {
		@include flexCenter(center);
		display: inline-flex;
		list-style: none;
		padding: 0;
		margin: 0;
		& > input[type=button], & > a, & > button, & > li {
			flex: 1;
			text-decoration: none;
			font-size: 0.929rem;
			padding: 0.536rem  1rem !important;
			display: inline-flex;
			background: #FFFFFF;
			border-left: 2px solid #56A7FD;
			border-top: 2px solid #56A7FD;
			border-bottom: 2px solid #56A7FD;
			border-right: none;
			color: #56A7FD;
			cursor: pointer;
			border-radius: 6px;
			outline: none;
			transition: all 0.4s;
			&:hover {
				background: rgba(86, 167, 253, 0.8);
				color: #FFFFFF;
				transition: all 0.4s;
			}
			&:not(:last-child) {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			&:not(:first-child) {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
			&:last-child {
				border-right: 2px solid #56A7FD;
			}
			&.active {
				background: #56A7FD !important;
				color: #ffffff;
			}
		}
	}
	&slider {
		height: 72px;
		width: 100%;
		background: none;
		@include flexCenter(center);
		justify-content: flex-start;
		position: relative;
		& > .slider- {
			&dot {
				position: absolute;
				cursor: pointer;
				top: 50%;
				width: 24px;
				height: 24px;
				margin-top: -12px;
				margin-left: -12px;
				z-index: 100;
				left: 40%;
				border-radius: 100%;
				background: #56A7FD;
				border: #56A7FD solid 1px;
				transition: all 0.4s;
				outline: 0;
				&:hover {
					transition: all 0.4s;
					width: 56px;
					margin-top: -28px;
					margin-left: -28px;
					height: 56px;
					border: #D5E9FA solid 16px;
				}
				&:focus {
					outline: 0;
					transition: all 0.4s;
					width: 72px;
					margin-top: -36px;
					margin-left: -36px;
					height: 72px;
					border: #D5E9FA solid 24px;
				}
			}
			&dot:disabled {
				width: 24px;
				height: 24px;
				margin-top: -12px;
				margin-left: -12px;
				background: #8E97A7;
				border: #8E97A7 solid 1px;
				&:hover {
					width: 24px;
					height: 24px;
					margin-top: -12px;
					margin-left: -12px;
					background: #8E97A7;
					border: #8E97A7 solid 1px;
				}
				& ~ .slider-bg {
					background: #E9EBEF;
				}
				& ~ .slider-at {
					background: #8E97A7;
				}
			}
			&bg {
				height: 8px;
				flex: 1;
				background: #D5E9FA;
				box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
			}
			&at {
				position: absolute;
				top: 50%;
				margin-top: -4px;
				left: 0;
				z-index: 1;
				width: 40%;
				height: 8px;
				background: #56A7FD;
				box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
			}

		}
	}
	&labels {
		vertical-align: middle;
		padding: 0.143rem 0.73328rem;
		display: inline-block;
		font-size: 0.643rem;
		border-radius: 3px;
		&.solid {
			background: #56A7FD;
			color: #ffffff;
		}
		&.border-blue {
			background: inherit;
			color: #56A7FD;
			border: 1px solid #56A7FD;
		}
		&.border-yellow {
			background: inherit;
			color: #FFD36A;
			border: 1px solid #FFD36A;
		}
		&.border-green {
			background: inherit;
			color: #3BCD99;
			border: 1px solid #3BCD99;
		}
		&.border-grey {
			background: inherit;
			color: #C8CDD5;
			border: 1px solid #C8CDD5;
		}
		&.border-red {
			background: inherit;
			color: #ED5158;;
			border: 1px solid #ED5158;
		}
		&.border-darkgray {
			background: inherit;
			color: #677388;
			border: 1px solid #677388;
		}
	}
	&stepper, &page {
		@include flexCenter(center);
		position: relative;
		display: inline-flex;
		justify-content: space-between;
		& > button:disabled {
			color: #DFE2E9;
			cursor: not-allowed;
			&:hover {
				color: #DFE2E9;
			}
		}
		& > button {
			width: 24px;
			height: 24px;
			border: none;
			outline: none;
			background: #FFFFFF;
			display: inline-block;
			box-shadow: 0px 7px 20px rgba(44, 60, 89, 0.07);
			border-radius: 6px;
			color: #2C3C59;
			cursor: pointer;
			margin-right: 0.5rem;
			transition: all 0.4s;
			@include flexCenter(center);
			&:hover {
				transition: all 0.4s;
				color: rgba(86, 167, 253, 0.89);
			}
			&:focus {
				border: none;
				outline: none;
				transition: all 0.4s;
				color: rgba(86, 167, 253, 0.89);
			}
			& > .minus {
				width: 8px;
				height: 2px;
				background: currentcolor;
				border-radius: 4px;
			}
			& > i{
				margin-top: 2px;
			}

		}
		& > span {
			display: inline-block;
			margin-right: 1rem;
			margin-left: 0.3rem;
			color: #56A7FD;
			font-weight: 600;
		}
		&>.input-box{
			margin-right: 0.3rem;
			margin-left: 0.3rem;
			height: 24px;
			font-size: 14px;
			padding: 0 0.65rem;
			display: inline-block;
			color: #ffffff;
			position: relative;
			& > input[type=text] {
				position: absolute;
				border-radius: 8px;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				font-size: 14px;
				display: inline-flex;
				padding: 0 0.4rem 0 0.6rem;
				border: none;
				background: #FFFFFF;
				box-shadow: 0px 7px 20px rgba(44, 60, 89, 0.07);
				color: #56A7FD;
				outline: none;



				@include placeholder;
				&:focus {
					outline: none;
				}
				& ~.error-box{
					display: none;
				}
				&.error{
					background: #FFFFFF;
					color: #56A7FD!important;
					border: 1px solid #ED5158!important;

				}
			}


		}
		&>.error{
			white-space:nowrap;
			width: auto;
			display: inline-block;
			position: absolute;
			bottom: -18px;
			right: 0;
			color:#ED5158 ;
		}
		&> .select {
			position: relative;
			box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
			border-radius: 6px;
			color: #56A7FD;



			width: auto!important;
			padding-right: 24px!important;
			margin-right: 10px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			background: #ffffff;
			font-weight: normal;
			font-size: 10px;
			user-select: none;
			outline: none;
			border: none;
			@include roll;
			& + span{
				font-weight: normal;
				font-size: 10px;
			}
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				margin-top: -2px;
				right: 10px;
				border-width: 4px !important;
				width: 0;
				height: 0;
				z-index: 0;
				border-style: solid;
				border-color: currentcolor transparent transparent transparent;
			}


		}
	}
	&tags{
		@include flexCenter(center);
		display: inline-flex;
		box-shadow: 0px 1.84107px 3.68213px rgba(46, 50, 60, 0.15);
		border-radius: 4px;
		padding: 0.536rem  1rem !important;
		margin-right: 0.5rem;
		margin-bottom: 0.2rem;
		margin-top: 0.2rem;
		&>i{
			margin-left: 1rem;
			cursor: pointer;
			border-radius: 100%;
			font-size: 1rem;
		}
	}

}

.icon-box {
	display: inline-block;
	align-self: center;
	font-size: 1.143rem;
	& > span:nth-of-type(1) {
		padding: 0.4em;
		display: inline-block;
		vertical-align: middle;
		margin-right: 2px;
	}

	& > i {
		padding: 0.438em;
		background: #E9EBEF;
		display: inline-block;
		vertical-align: middle;
		border-radius: 0.2rem;
		&:not(:last-child) {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		&:not(:first-child) {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
}